<template>
  <div class="container">
    <div class="app-container">
      <el-card v-if="liststate">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
          <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-card class="box-card">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          :model="formInline"
          ref="formInline"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="标签名称" prop="tagName">
                <el-input
                  v-model="formInline.tagName"
                  @keyup.enter="handleFilter"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="状态" prop="state">
                <el-select
                  v-model="formInline.state"
                  placeholder="请选择"
                  @keyup.enter="handleFilter"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="eliminate">清除</el-button>
                <el-button type="primary" @click="handleFilter">搜索</el-button>
              </el-form-item>
            </el-col>
            <div class="fr">
              <el-link
                type="primary"
                icon="el-icon-back"
                style="padding-right:8px"
                v-if="liststate"
                @click="toClick"
                >返回学科</el-link
              >
              <el-button
                class="filter-item "
                size="small"
                style="margin-left: 10px;"
                type="success"
                icon="el-icon-edit"
                @click="handleChange(null, $event)"
                >新增标签</el-button
              >
            </div>
          </el-row>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
          class="alert"
        >
        </el-alert>
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          style="width: 100%"
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签名称">
            <template slot-scope="scope">
              <span>{{ scope.row.tagName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期">
            <template slot-scope="scope">
              <span>{{
                scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="handleStatus(row)">
                {{ row.state == 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 0 ? false : true"
                @click="handleChange(row.id)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 0 ? false : true"
                @click="removeUser(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination fr">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formInline.page"
              :total="this.total"
              :page-size="formInline.pagesize"
              :page-sizes="[10, 20, 30, 50]"
              v-if="!liststate"
              layout="prev, pager, next,sizes, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- <el-dialog
          :title="titleInfo.text + titleInfo.pageTitle"
          :visible.sync="addDialogVisible"
          width="40%"
        >
          <tags-add :formBase="formData"></tags-add>
          <span slot="footer" class="dialog-footer">
            <el-button @click="$emit('input', false)">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog> -->
        <el-dialog
          :title="titleInfo.text + titleInfo.pageTitle"
          :visible.sync="addDialogVisible"
          width="40%"
        >
          <tags-add
            v-if="addDialogVisible"
            :id="id"
            ref="add"
            @close="closeadd"
            :liststate="liststate"
            :subjectID="subjectID"
          ></tags-add>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickadd">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState, detail } from '@/api/hmmm/tags.js'
import TagsAdd from './../components/tags-add.vue'
export default {
  data() {
    return {
      formInline: {
        page: 1,
        pagesize: 10
      },
      tableKey: 0,
      dataList: [],
      total: null,
      alertText: '',
      titleInfo: {
        pageTitle: '标签', // 页面标题
        text: '' // 新增、编辑文本
      },
      addDialogVisible: false,
      formData: {
        id: '',
        subjectID: '',
        tagName: '',
        creator: '',
        addDate: '',
        totals: '',
        state: ''
      },
      id: '',
      liststate: false,
      subjectID: ''
    }
  },
  components: { TagsAdd },
  created() {
    this.getList()
    if (this.$route.query.id) {
      this.liststate = true
      this.subjectID = this.$route.query.id
      this.formInline.subjectID = this.subjectID
      this.getList()
    }
  },
  computed: {
    status() {
      return status
    }
  },
  mounted() {},
  methods: {
    toClick() {
      this.$router.push('/subjects/list')
    },
    async getList() {
      try {
        const { data } = await list(this.formInline)
        console.log(data)
        // 获取数据给dataList
        this.dataList = data.items
        // 获取总条数
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (err) {
        this.$message.error('获取失败!')
      }
    },
    handleSizeChange(newSize) {
      this.formInline.pagesize = newSize
      this.getList()
    },
    handleCurrentChange(newPage) {
      this.formInline.page = newPage
      this.getList()
    },
    handleFilter() {
      this.formInline.page = 1
      this.getList()
    },
    eliminate() {
      this.$refs.formInline.resetFields()
      this.getList()
      // this.formInline = {}
    },
    // **********************************
    // 搜索的项目
    // 添加、编辑之后表单清空
    query() {
      this.formData = {}
    },
    // 新增用户、编辑用户
    handleChanges(id) {
      this.query()
      this.addDialogVisible = true
      if (id === 'add') {
        this.titleInfo.text = '新增' // 给弹层传参
      } else {
        // console.log(id)
        this.titleInfo.text = '修改' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },
    async hanldeEditForm(id) {
      try {
        this.formData.id = id
        const { data: res } = await detail({ id: id })
        this.formData = res
        console.log(res)
        // this.formData.subjectID = res.subjectID
        console.log(this.formData.subjectID)
        // console.log(this.formData)
      } catch (err) {}
    },
    async handleStatus(val) {
      if (val.state !== 0) {
        val.state = 0
      } else {
        val.state = 1
      }
      var data = {
        id: val.id,
        state: val.state
      }
      try {
        await changeState(data)
        if (val.state === 1) {
          this.$message.success('启用成功')
        } else {
          this.$message.success('禁用成功')
        }
      } catch (err) {
        this.$message.error('启用失败!')
      }
    },
    // 删除
    async removeUser(user) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') return this.$message.info('已经取消删除')
      try {
        await remove({ id: user })
        this.$message.success('成功删除' + '!')
        this.dataList.splice(user, 1)
        this.getList()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    handleChange(id) {
      if (id) {
        this.titleInfo.text = '修改' // 给弹层传参
        this.id = id
      } else {
        this.id = ''
        this.titleInfo.text = '新增' // 给弹层传参
      }
      this.addDialogVisible = true
    },
    clickadd() {
      this.$refs.add.btnclick()
    },
    closeadd() {
      this.addDialogVisible = false
      this.getList()
      this.id = ''
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-alert {
  margin-bottom: 10px;
}
.el-pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
F
